<meta charset="UTF-8">
<div id="adduser">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.addUser")}}</h3>

        <div>
            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("reportForm.selectAccount")}} : &nbsp;</i-col>
                <i-col span="12">
                    <el-select v-model="createrToUser" style="width: 100%;" size="mini" filterable>
                        <el-option v-for="item in userlists" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.username")}} : &nbsp;</i-col>
                <i-col span="12">
                    <i-input v-model.trim="username" :disabled="!isDisabled"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.password")}} : &nbsp;</i-col>
                <i-col span="12">
                    <i-input v-model.trim="password"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    <i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("user.userType")}} : &nbsp;</i-col>
                <i-col span="12">
                    <i-select v-model="usertype">
                        <i-option v-for="item in userTypeList" :value="item.type" :key="item.type">{{ item.name }}</i-option>
                    </i-select>
                </i-col>
            </Row>


            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    &nbsp;{{$t("user.showname")}} : &nbsp;
                </i-col>
                <i-col span="12">
                    <i-input v-model.trim="showname"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    &nbsp;{{$t("user.corporateName")}} : &nbsp;
                </i-col>
                <i-col span="12">
                    <i-input v-model.trim="companyname"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    &nbsp;{{$t("user.name")}} : &nbsp;
                </i-col>
                <i-col span="12">
                    <i-input v-model.trim="cardname"></i-input>
                </i-col>
            </Row>


            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    &nbsp;{{$t("user.phone")}} : &nbsp;</i-col>
                <i-col span="12">
                    <i-input v-model.trim="phone"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    &nbsp;{{$t("user.address")}} : &nbsp;
                </i-col>
                <i-col span="12">
                    <i-input v-model.trim="companyaddr"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    &nbsp;QQ : &nbsp;</i-col>
                <i-col span="12">
                    <i-input v-model.trim="qq"></i-input>
                </i-col>
            </Row>
            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    &nbsp;{{$t("user.weChat")}} : &nbsp;</i-col>
                <i-col span="12">
                    <i-input v-model.trim="wechat"></i-input>
                </i-col>
            </Row>
            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                    &nbsp;{{$t("header.email")}} : &nbsp;</i-col>
                <i-col span="12">
                    <i-input v-model.trim="email"></i-input>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("user.moreLanding")}} : &nbsp;</i-col>
                <i-col span="12">
                    <i-select v-model="multilogin">
                        <i-option value="1">{{$t("header.yes")}}</i-option>
                        <i-option value="0">{{$t("header.no")}}</i-option>
                    </i-select>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="12" :offset="4">
                    <i-button style="width:100%" @click="handleSubmit">{{$t("user.add")}}</i-button>
                </i-col>
            </Row>
        </div>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#adduser",
            i18n: utils.getI18n(),
            data: {
                username: "",
                password: "",
                usertype: "",
                showname: "",
                singleLogin: "0",
                phoneLogin: "0",
                weixinLogin: "0",
                multilogin: "1",
                groupcount: 10,
                devicecount: 500,
                usercount: 10,
                companyname: '',
                cardname: '',
                companyaddr: '',
                iconState: "ios-arrow-down",
                isShowMatchDev: false,
                userlists: [],
                createrToUser: userName,
                isDisabled: true,
                userTypeList: [],
                qq: "",
                email: "",
                phone: "",
                wechat: ""
            },
            methods: {
                selectedUser: function(item) {
                    var me = this;
                    setTimeout(function() {
                        me.isShowMatchDev = false;
                        me.createrToUser = item.username;
                    }, 100)
                },
                handleSubmit: function() {
                    var me = this;
                    var isExist = false;
                    this.list.forEach(function(item) {
                        if (item.username === me.createrToUser) {
                            isExist = true;
                        }
                    })

                    if (!isExist) {
                        this.$Message.error(this.$t("message.selectCorrectAccount"));
                        return;
                    }

                    if (this.password == '') {
                        this.$Message.error(this.$t("header.error_2"));
                        return;
                    }



                    var url = myUrls.addUser();
                    var userType = this.usertype;

                    var reg = /^[a-zA-Z0-9_-]{4,32}$/;
                    var data = {
                        username: this.username,
                        password: $.md5(this.password),
                        usertype: userType,
                        creater: this.createrToUser
                    };

                    if (this.showname != '') {
                        data.showname = this.showname;
                    }

                    if (this.username.trim() == "") {
                        this.$Message.error(this.$t("message.usernameRule"));
                        return;
                    }

                    for (var key in data) {
                        if (data.hasOwnProperty(key)) {
                            if (data[key] === "" || data[key] == NaN) {
                                this.$Message.error(this.$t("message.fullComplete"));
                                return;
                            }
                        };
                    };
                    data.multilogin = Number(this.multilogin);
                    this.qq ? data.qq = this.qq : "";
                    this.email ? data.email = this.email : "";
                    this.phone ? data.phone = this.phone : "";
                    this.wechat ? data.wechat = this.wechat : "";
                    this.companyname ? data.companyname = this.companyname : null;
                    this.cardname ? data.cardname = this.cardname : null;
                    this.companyaddr ? data.companyaddr = this.companyaddr : null;

                    utils.sendAjax(url, data, this.doAddUserCalback);
                },
                doAddUserCalback: function(resp) {
                    if (resp.status == 0) {
                        this.$Message.success(this.$t("message.addSucc"));
                        globalUserList.push(resp.username);
                    } else {
                        var cause = resp.cause;
                        if (cause.indexOf("exists") != -1) {
                            this.$Message.error(this.$t("message.userExists"));
                        } else {
                            this.$Message.error(resp.cause);
                        }
                    }
                },
                setUserTypeByUser: function(userType) {
                    var newArray = deepClone(vstore.state.userTypeDescrList);
                    newArray.shift();
                    newArray.pop();
                    if (userType == 1) {
                        newArray.shift();
                    } else if (userType == 2) {
                        newArray.shift();
                        newArray.shift();
                    } else if (userType == 3) {
                        newArray.shift();
                        newArray.shift();
                        newArray.shift();
                    } else if (userType == 4) {
                        newArray = [];
                    } else if (userType > 10) {
                        newArray = [];
                    }
                    this.userTypeList = newArray;
                },

                getUserInfoList: function() {
                    var url = myUrls.queryUser();
                    utils.sendAjax(url, {
                        username: userName
                    }, this.doUserInfoList);
                },
                doUserInfoList: function(resp) {
                    var me = this;
                    var list = [];
                    if (resp.status == 0 && resp.userlists != null) {

                        resp.userlists.forEach(function(item) {
                            if (item.usertype < 4) {
                                list.push({
                                    username: item.username,
                                    usertype: item.usertype
                                })
                            }
                        });
                    }
                    list.push({
                        username: userName,
                        usertype: vstore.state.userType
                    })
                    me.list = list;
                },
            },
            watch: {
                createrToUser: function(newVal) {
                    var index = -1;
                    this.list.forEach(function(item, idx) {
                        if (item.username === newVal) {
                            index = idx;
                        }
                    });
                    this.usertype = "";
                    if (index != -1) {
                        this.setUserTypeByUser(this.list[index].usertype);
                    } else {
                        this.userTypeList = [];
                    }
                },

            },
            mounted: function() {
                this.list = [];
                var userlists = [];
                globalUserList.forEach(function(item) {
                    userlists.push({
                        label: item,
                        value: item,
                    })
                });
                this.userlists = userlists;
                this.getUserInfoList();
                this.setUserTypeByUser(vstore.state.userType);
            }
        })
    </script>
</div>